import React,{Component} from 'react';
import {View,Text,Button,Image,ScrollView} from 'react-native'
import { Container, Header, Content, List,Card,CardItem,ListItem,Thumbnail,Icon,Item,Input,Left, Body, Right, Switch } from 'native-base';
import {Actions} from 'react-native-router-flux'
class Navhead extends Component{
    render(){
        return(
            <View style={{height:140,backgroundColor:'#ff6200',width:'auto'}}>
                <View style={{flexDirection:'row'}}>
                <View style={{width:60,height:60,borderRadius:60,marginTop:40,marginLeft:20}}><Image source={require('../assets/7.jpg')} style={{width:60,height:60,borderRadius:60}}/></View>
                <Text style={{color:'white',fontSize:15,paddingTop:55,paddingLeft:10}}>用户登录</Text>
                </View>               
            </View>
        )
    }
}
class Imagex extends Component{
    render(){
        return(
            <Image source={require('../assets/8.png')} style={{width:'auto',height:50,marginTop:-20}}/>
        )
    }
}
class Listy extends Component{
    render(){
        return(
            <View style={{flexDirection:'row',justifyContent:'center',marginTop:20}}>
                <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                    <Icon active name="barcode" style={{color:'#ff7000',fontSize:25}}/>
                    <Text >优惠券</Text>
                </View>
                <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                    <Icon active name="card" style={{color:'#ff7000',fontSize:25}}/>
                    <Text>卡包</Text>
                </View>
                <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                    <Icon active name="chatboxes" style={{color:'#ff7000',fontSize:25}}/>
                    <Text>我的评价</Text>
                </View>
            </View>
        )
    }
}
class Nc extends Component{
    render(){
        return(
            <View style={{flexDirection:'column',width:'auto',height:'auto',padding:20}}>
                <Text style={{fontSize:20}}>农场</Text>
                <Image source={require('../assets/9.png')} style={{width:330,height:100}}/>
            </View>
        )
    }
    
}
class Cy extends Component{
    render(){
        return(
            <View style={{flexDirection:'column',width:'auto',height:'auto',padding:20}}>
                <Text style={{fontSize:20}}>常用功能</Text>
                <Content>
                <Card>
                    <CardItem style={{width:330}}>
                    <Icon active name="heart-empty" />
                    <Text>我的收藏</Text>
                    <Right>
                        <Icon name="arrow-forward" />
                    </Right>
                    </CardItem>
                    <CardItem style={{width:330}}>
                    <Icon active name="people" />
                    <Text>邀请好友赚现金</Text>
                    <Right>
                        <Icon name="arrow-forward" />
                    </Right>
                    </CardItem>
                    <CardItem style={{width:330}}>
                    <Icon active name="gift" />
                    <Text>银行卡特惠</Text>
                    <Right>
                        <Icon name="arrow-forward" />
                    </Right>
                    </CardItem>
                    <CardItem style={{width:330}}>
                    <Icon active name="copy" />
                    <Text>流量中心</Text>
                    <Right>
                        <Icon name="arrow-forward" />
                    </Right>
                    </CardItem>
                </Card>
                </Content>
            </View>
        )
    }
}
export default class Setting extends Component{
   render(){
       return(
           <ScrollView>
           <Navhead/>
           <Imagex/>
           <Listy/>
           <Nc/>
           <Cy/>
           </ScrollView>
       )
    }
}